<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
</head>
<div id="root">

</div>

<body>
    <script type="text/babel">
        /**
         * 在标签属性上通过 on 事件名=事件回调函数进行绑定
         * 1. 事件名首字母大写
         * 2. 事件回调函数添的是函数名[函数的定义,函数的引入地址] 而不是函数的调用
         * this 指向的问题
         *  1. fn 是谁调用的, this! 事件回调函数的调用者是window
         *  2. react 中的事件对象e 是一个经过react包装后的事件对象.已经经过兼容性处理
         *  3. 获取原生对象 e.nativeEvent
         *  4. 事件的回调函数是window 帮我们调用的,会默认的将事件对象作为一个实参传递给函数
         */
        function click1(){
            console.log("click1")
            // this 指向 undefined undefined 说明 react中事件回调的调用者也是window
            // 严格模式 所以是undefined 
            console.log("this",this)
        }
        function click2(e){
            // 阻止默认行为
            e.preventDefault()
            console.log('this',this)
        }
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render((
            <div>
                <p><button onClick={click1}>别说话 点我</button></p>
                <p><a href="http://www.baidu.com" onClick={click2}>百度</a></p>
            </div>
        ));
    </script>
</body>
</html>